<template>
  <div flex="cross:center">
    <i class="iconfont icon-jianhao tap" @click="subtract"></i>
    <input v-model="input" type="number" class="tc"/>
    <i class="iconfont icon-jiahao tap" @click="add"></i>
  </div>
</template>
<script>
  export default {
    props: {
      value: null,
      max: {
        type: Number
      },
      min: {
        type: Number,
        default: 1
      }
    },
    data() {
      return {}
    },
    computed: {
      input: {
        get() {
          return this.value
        },
        set(v) {
          this.$emit('input', v)
        }
      }
    },
    created () {

    },
    methods: {
      subtract () {
        this.input--
      },

      add () {
        this.input++
      }
    },
    watch: {
      input () {
        if (this.input <= this.min) {
          this.input = this.min
        } else if (this.input >= this.max && this.max !== undefined) {
          this.input = this.max
        }
      }
    },
    components: {}
  }
</script>
<style type="text/scss" lang="scss" scoped>
  $font-size: 14px;
  $color: #f5f5f5;
  $size: 2.2em;
  div {
    font-size: $font-size;
    line-height: normal;
  }
  input {
    display: block;
    height: $size;
    width: 3.8em;
    border: none;
    font-size: inherit;
    border-top: 2px solid $color;
    border-bottom: 2px solid $color;
  }
  i {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: $color;
    color: #8c8c8c;
    font-size: inherit;
    width: $size * 1.2;
    height: $size;
  }
</style>
